<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { userInfoStore } from '../assets/userStore/userStore';
import { ComponentSize, FormInstance, FormRules } from 'element-plus';
import { CircleCheckFilled } from '@element-plus/icons-vue'
import { AddressModel } from '../assets/models/Address';
import { addressApis } from '../assets/apis/AddressApis';

const fill = ref<boolean>(true)
const size = ref<ComponentSize>('default')
const isEmpty = ref<boolean>(true);
const hasDefaultAddress = ref<boolean>(true);
const addresses = ref<Array<AddressModel>>([]);
const userStore = userInfoStore();
const defaultAddress = ref<AddressModel>()
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<AddressModel>({
    school_name: '',
    campus: '',
    user: userStore.id,
    address: ''
})

const rules = reactive<FormRules<AddressModel>>({
    school_name: [
        {
            required: true,
            message: '请输入学校名称',
            trigger: 'blur'
        }
    ],
    campus: [
        {
            required: true,
            message: '请输入所在校区',
            trigger: 'blur'
        }
    ],
    address: [
        {
            required: true,
            message: '请输入详细地址',
            trigger: 'blur'
        }
    ]
})

const submitForm = () => {
    addressApis.insertAddress(ruleForm)
        .then((value: AddressModel) => {
            if (value) {
                ruleForm.address = '';
                ruleForm.school_name = '';
                ruleForm.campus = '';
                addressApis.queryAddress(userStore.id)
                    .then((value) => {
                        addresses.value = value;
                        isEmpty.value = false;
                    })
            }
        })
}

const updateDefault = (id: number) => {
    addressApis.updateAddress(id, userStore.id)
        .then((value: boolean) => {
            if (value) {
                addressApis.queryAddress(userStore.id)
                    .then((value: Array<AddressModel>) => {
                        addresses.value = value;
                        if (value.length != 0) {
                            isEmpty.value = false;
                        } else {
                            isEmpty.value = true;
                        }
                    })
                addressApis.queryDefaultAddress(userStore.id)
                    .then((value: AddressModel) => {
                        if (value) {
                            defaultAddress.value = value;
                            hasDefaultAddress.value = true;
                        } else {
                            hasDefaultAddress.value = false;
                        }
                    })
            }
        })
}

const deleteAddress = (id: number) => {
    addressApis.deleteAddress(id)
        .then((value: boolean) => {
            if (value) {
                addressApis.queryAddress(userStore.id)
                    .then((value: Array<AddressModel>) => {
                        addresses.value = value;
                        if (value.length != 0) {
                            isEmpty.value = false;
                        } else {
                            isEmpty.value = true;
                        }
                    })
            }
        })
}



onMounted(() => {
    addressApis.queryAddress(userStore.id)
        .then((value: Array<AddressModel>) => {
            addresses.value = value;
            if (value.length != 0) {
                isEmpty.value = false;
            } else {
                isEmpty.value = true;
            }
        })
    addressApis.queryDefaultAddress(userStore.id)
        .then((value: AddressModel | undefined) => {
            if (value) {
                defaultAddress.value = value;
                hasDefaultAddress.value = true;
            } else {
                hasDefaultAddress.value = false;
            }
        })
})
</script>
<template>
    <el-row>
        <el-col :span="24" style="margin-top: 1%;">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
                <el-form-item label="学校名称" prop="school_name">
                    <el-row justify="space-between" style="width: 100%;">
                        <el-col :span="19">
                            <el-input v-model="ruleForm.school_name" size="large"></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="学校校区" prop="campus">
                    <el-row justify="space-between" style="width: 100%;">
                        <el-col :span="19">
                            <el-input v-model="ruleForm.campus" size="large"></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="公寓宿舍" prop="address">
                    <el-row justify="space-between" style="width: 100%;">
                        <el-col :span="19">
                            <el-input v-model="ruleForm.address" size="large"></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="warning" plain style="padding: 3%;width: 100%;" size="large"
                                @click="submitForm">添加地址</el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
    <el-text style="font-size: large;">我的地址</el-text>
    <el-scrollbar height="100%" style="overflow-y: hidden; margin-top: 1%;">
        <el-space wrap :size="size" :fill="fill" style="width: 100%;">
            <el-text>
                默认地址
            </el-text>
            <el-card shadow="hover" v-show="hasDefaultAddress">
                <el-row style="width: 100%;" align="middel" justify="center">
                    <el-col :span="6">
                        <el-text>
                            {{ defaultAddress?.school_name }}
                        </el-text>
                    </el-col>
                    <el-col :span="5">
                        <el-text>
                            {{ defaultAddress?.campus }}
                        </el-text>
                    </el-col>
                    <el-col :span="5">
                        <el-text>
                            {{ defaultAddress?.address }}
                        </el-text>
                    </el-col>
                    <el-col :span="8" align="center">
                        <el-icon>
                            <CircleCheckFilled color="#32d700" />
                        </el-icon>
                    </el-col>
                </el-row>
            </el-card>
            <el-text>
                其它地址
            </el-text>
            <div v-for="i in addresses" :key="i.id" v-show="!isEmpty">
                <el-card shadow="hover">
                    <el-row style="width: 100%;" align="middel" justify="center">
                        <el-col :span="6">
                            <el-text>
                                {{ i.school_name }}
                            </el-text>
                        </el-col>
                        <el-col :span="5">
                            <el-text>
                                {{ i.campus }}
                            </el-text>
                        </el-col>
                        <el-col :span="5">
                            <el-text>
                                {{ i.address }}
                            </el-text>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="success" plain style="width: 95%;"
                                @click="updateDefault(i.id!)">设为默认</el-button>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="danger" plain style="width: 95%;"
                                @click="deleteAddress(i.id!)">删除地址</el-button>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
        </el-space>
    </el-scrollbar>
    <el-empty v-show="isEmpty" description="快去添加地址吧～" />
</template>
<style>
.container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.sider {
    padding: 20px;
    height: 100%;
    border-radius: 15px;
    box-shadow: 0px 0px 1px 1px #fbaf5a;
}

.font_main {
    font-size: 25px;
    color: black;
    font-weight: bolder;
}

.header_profile {
    width: 100%;
    height: 90px;
    background-color: #fbaf5a;
    padding: 20px;
}

.imgInfo {
    border-radius: 50%;
    width: 45%;
    border-color: white;
    border-width: 10px;
    border-style: solid;
}
</style>
